<template>
	<view class="main">
		<view class="">
			<view class="header-area">
				<view class="header row u-padding-20">
					<u-avatar :src="goodsInfo.image" mode="square" :size="120"></u-avatar>
					<view class="ml10 row flex1">
						<view class="flex1">
							<view class="line1 font-weight-500 md black">{{goodsInfo.name||''}}</view>
							<view class="line1 mt10 xs">{{goodsInfo.remark||''}}</view>
							<view class="row mt10">
								<view class="row mr10 u-padding-right-15 u-border-right">
									<u-icon name="account" :size="26" class="mr5"></u-icon>
									<text class="xs">{{goodsInfo.people_number||0}}</text>
								</view>
								<view class="row ml10">
									<u-icon name="man-add" :size="26" class="mr5"></u-icon>
									<text class="xs">{{goodsInfo.last_join_time||''}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<image src="https://resource.lanbaozixun.com/uploads/images/2024072321213410fee0148.png" mode="widthFix"
				class="w-full block"></image>
		</view>
		<view class="content-area">
			<view class="row u-padding-left-16 u-padding-right-16">
				<view class="price-area xxxl font-weight-500 u-flex-1 row">
					仅需{{price}}元入群
				</view>
				<view class="u-flex-1 nr u-text-right name-icon">
					LANBAOZIXUAN
				</view>
			</view>
			<view class="content mt20 ml20 mr20 u-padding-32">
				<view class="g-19284f-color lg font-weight-500">进群规则</view>
				<view class="mt20 muted">
					<u-parse :html="goodsInfo.content"></u-parse>
				</view>
				<view class="g-19284f-color lg font-weight-500 mt20">收费说明</view>
				<view class="mt20 muted">
					<u-parse :html="goodsInfo.shoufei"></u-parse>
				</view>
				<view class="g-19284f-color lg font-weight-500 mt20">如何进群</view>
				<view class="mt20 muted">
					<u-parse :html="goodsInfo.ruhe"></u-parse>
				</view>

				<view class="footer mt30 u-padding-20">
					<u-button @click="getIsBuyFun" type="primary" shape="circle" hover-class="none" :custom-style="{
							background:'linear-gradient(180deg, #6BB2FF 0%, #437EEA 100%)'
						}">{{price}}元立即进群</u-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		prepay
	} from '@/api/app'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		getUser
	} from '@/api/user'
	import {
		orderBuy,
	} from '@/api/order'
	import {
		getIsBuy,
		getGoodsDetail
	} from '@/api/store'
	export default {
		data() {
			return {
				goodsId: 0,
				price: 0.00,
				goodsInfo: {},
				order_id: 0
			};
		},
		onLoad(e) {
			if (e.id) {
				this.goodsId = e.id;
				this.getGoodsDetailFun()
			}
		},
		methods: {
			getGoodsDetailFun() {
				getGoodsDetail({
					id: this.goodsId
				}).then(res => {
					if (res.code == 1) {
						this.goodsInfo = res.data
						this.price = res.data.goods_item[0].price
					}
				})
			},
			getIsBuyFun() {
				getIsBuy({
					item_id: this.goodsInfo.goods_item[0].id
				}).then(res => {
					if (res.code == 1) {
						if (res.data != false && res.data) {
							uni.redirectTo({
								url: '/pages/pay_result/pay_result?id=' + res.data
							})
						} else {
							this.purchase()
						}
					}
				})
			},
			purchase() {
				//#ifndef H5 || MP-WEIXIN 
				this.$refs.uToast.show({
					title: '请使用微信公众号支付',
					type: 'error'
				})
				// #endif
				//#ifdef H5 || MP-WEIXIN 
				uni.showLoading({
					title: '加载中'
				});
				orderBuy({
					action: 'submit',
					item_id: this.goodsInfo.goods_item[0].id
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.order_id = res.data.order_id;
						prepay({
							from: res.data.type,
							order_id: res.data.order_id,
							pay_way: 1,
						}).then(res => {
							this.handleWechatPay(res.data);
						}).catch(err => {}).finally(() => {
							setTimeout(() => {
								this.loadingPay = false
							}, 500)
						})
					} else {
						throw new Error(msg)
					}
				})
				// #endif
			},
			// 微信支付
			handleWechatPay(data) {
				wxpay(data).then(res => {
					this.handPayResult(res)
				})
			},
			// 支付后处理
			handPayResult(result) {
				switch (result) {
					case 'success':
						uni.redirectTo({
							url: '/pages/pay_result/pay_result?id=' + this.order_id
						})
						break;
					case 'fail':
					default:
						uni.$emit('payment', {
							result: false,
							order_id: this.order_id
						})
				}
				// 页面出栈
			}
		},
		computed: {
			...mapGetters(["userInfo", "appConfig"])
		}
	}
</script>

<style lang="scss">
	page {

		.block {
			display: block;
		}

		.main {

			display: grid;
			min-height: 100vh;
			grid-template-rows: minmax(10px, max-content) auto;

			.header-area {
				padding: 20rpx;
				background: url('https://resource.lanbaozixun.com/uploads/images/2024072316541385e5e5072.png') no-repeat;
				background-size: 100% 100%;

				.header {
					color: #999999;
					background: url('https://resource.lanbaozixun.com/uploads/images/20240723205537b17965323.png') no-repeat;
					background-size: 100% 100%;
				}
			}

			.content-area {
				background: url('https://resource.lanbaozixun.com/uploads/images/2024072321261823abf4276.png') no-repeat;
				background-size: 100% 100%;

				.price-area {
					position: relative;
					padding-left: 30rpx;

					&:before {
						top: 0;
						left: 0;
						bottom: 0;
						content: ' ';
						width: 22rpx;
						position: absolute;
						background: #148AFF;
						border-radius: 0 30rpx 30rpx 0;
					}

				}

				.name-icon {
					color: #5BAEFF;
					border-bottom: 1px dotted #5A7B9E;
				}

				.content {
					background: #F0F9FF;
					border-radius: 22rpx 100rpx 22rpx 100rpx;
					box-shadow: 0px 2px 4px #78BBFF;

					.g-19284f-color {
						color: #19284F;
					}
				}
			}
		}



		.card {
			// width: 95%;
			// margin: 20rpx;
			// border-radius: 10rpx;
			// background: #FFFFFF;
		}
	}
</style>